<script setup lang="ts">
import type { Ref } from 'vue'
import type { ComponentOptions, componentType, FormBasicConfig } from '@/components/LayoutForm/src/componentPanel/index'
import { computed, inject, ref } from 'vue'

import GaDialog from '../components/GaDialog/index.vue'
import FormPaser from '../formParser/index.vue'

const componentsPanel = inject('componentsPanel') as Ref<componentType[]>
const formBasicConfig = inject('formBasicConfig') as Ref<FormBasicConfig>

const formConfig = computed(() => {
  return {
    formBasicConfig: formBasicConfig.value,
    components: componentsPanel.value.map(v => v.options) as ComponentOptions[],
  }
},
)

const visible = ref(false)
function onOpen() {
  visible.value = true
}

defineExpose({
  onOpen,
})
</script>

<template>
  <GaDialog v-model="visible" title="预览">
    <FormPaser v-if="visible" :form-config="formConfig" />
  </GaDialog>
</template>
